<template>
  <div class="ssy-box">
    <table class="ssy-table">
      <tr class="gi-table-row gi-th1">
        <th class="ssy-head-data">项目</th>
        <th class="ssy-head-data">个人缴纳</th>
        <th class="ssy-head-data">单位缴纳</th>
      </tr>
      <tr class="gi-table-row bg-normal-1" v-for="item in items">
        <td class="ssy-data">{{item.type}}</td>
        <td class="ssy-data">
          <input class="i-input" id="item.person" name="item.person" type="number"
                 v-model="item.person"
                 @input="item.person=$_numberUtil.checkPosNumber(item.person)"> %
        </td>
        <td class="ssy-data">
          <input class="i-input" id="item.business" name="item.business" type="number"
                 v-model="item.business"
                 @input="item.business=$_numberUtil.checkPosNumber(item.business)"> %
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
  export default {
    name: "SocialSecurity",
    data() {
      return {
        items: [
          {
            type: '养老',
            name: '养老',
            person: 8.0,
            business: 16.0
          }, {
            type: '医疗',
            name: '医疗',
            person: 2.0,
            business: 10.0
          }, {
            type: '失业',
            name: '失业',
            person: 0.2,
            business: 0.8
          }, {
            type: '工伤',
            name: '工伤',
            person: 0.0,
            business: 0.4
          }, {
            type: '生育',
            name: '生育',
            person: 0.0,
            business: 0.8
          }, {
            type: '公积金',
            name: '公积金',
            person: 12.0,
            business: 12.0
          },
        ]
      }
    },
    methods: {
      calculate() {
        let tip = ''
        for (let item of this.items) {
          let p = parseFloat(item.person)
          let b = parseFloat(item.business)
          if (isNaN(p) || isNaN(b) || b > 90 || p > 90) {
            tip = item.name + '数据输入有问题'
            break
          }
          item.person = p
          item.business = b
        }
        if (tip.length > 1) {
          this.$createToast({
            time: 2000,
            type: 'text',
            txt: tip,
          }).show()
          return []
        }
        return this.items
      }
    },
  }
</script>

<style scoped>
  .ssy-table {
    width: 100%;
  }

  th, td {
    flex: 1;
  }

  .i-input {
    text-align: center;
    max-width: 5rem;
    border: 1px solid lightgrey;
    border-radius: 3px;
    line-height: 2.2rem;
  }
</style>
